<script>
import http from "../../../../utils/request"
import { handleMoney, showModal } from "../../../../utils"
import closeIcon from "../../../../static/close_line.png"

export default {
  name: "couponPopup",
  props: {
    noCoupon: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      couponList: [],
      currentSelectItem: {},
      loading: false,
      closeIcon,
    }
  },
  methods: {
    handleMoney,
    currentSelectItemChange(val) {
      if (!this.currentSelectItem || val.userCouponId !== this.currentSelectItem.userCouponId) {
        this.changeCurrentItem(val)
      } else {
        //取消选中
        this.changeCurrentItem(null)
      }
      this.$refs.popup.close()
    },
    changeCurrentItem(val) {
      this.currentSelectItem = val
      this.$emit("select", val)
    },
    //获取优惠券列表
    getCouponList() {
      return new Promise((resolve, reject) => {
        uni.showLoading({
          title: "加载中...",
        })
        this.loading = true
        http({
          url: "userCoupon/page",
          method: "post",
          data: {
            current: 1,
            size: -1,
            couponTypeList: [0, 1],
          },
        })
          .then((res) => {
            if (res.records.length === 0) {
              this.$emit("update:noCoupon", true)
            }
            this.couponList = res.records
            //默认选中第一个
            this.changeCurrentItem(this.couponList[0] ? this.couponList[0] : {})
            resolve(res.records)
          })
          .catch((err) => {
            console.log(err, "err")
            showModal.default(err)
            reject()
          })
          .finally(() => {
            this.loading = false
            uni.hideLoading()
          })
      })
    },
    handlePopupOpen() {
      this.$refs.popup.open()
    },
  },
  emits: ["select", "update:noCoupon"],
}
</script>

<template>
  <view class="component">
    <uni-popup ref="popup" type="bottom">
      <view class="coupon-list">
        <view class="header">
          <view></view>
          <view class="title">选择优惠券</view>
          <image
            class="close-btn"
            :src="closeIcon"
            @click="
              () => {
                $refs.popup.close()
              }
            "
          ></image>
        </view>
        <view class="coupon-wrapper">
          <radio-group>
            <view class="coupon-item-wrapper" v-for="item in couponList" :key="item.userCouponId">
              <view class="coupon-item" @click="currentSelectItemChange(item)">
                <view class="left">
                  <radio :value="item.userCouponId" :checked="item.userCouponId === currentSelectItem.userCouponId"></radio>
                </view>
                <view class="right">
                  <view class="left">
                    <view class="coupon-name">{{ item.couponName }}</view>
                    <view class="expire-date">有效期：{{ item.expireTime }} </view>
                  </view>
                  <view class="right">
                    <!--									价格减免策略-->
                    <view class="price" v-if="item.priceStrategy === '0'">减￥{{ handleMoney(item.price) }} </view>
                    <!--										打折-->
                    <view class="price" v-else-if="item.priceStrategy === '1'">{{ item.discountRate * 10 }} 折 </view>
                    <!--										满减-->
                    <view class="price" v-else-if="item.priceStrategy === '2'"
                      >满 {{ handleMoney(item.fullYuan) }} 减 {{ handleMoney(item.price) }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </radio-group>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style scoped lang="scss">
.coupon-list {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 50rpx 50rpx 0 0;
  max-height: 70vh;
  display: flex;
  flex-direction: column;

  > .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    > .title {
      font-size: 32rpx;
      font-weight: 500;
    }

    .close-btn {
      width: 50rpx;
      height: 50rpx;
    }
  }

  .coupon-wrapper {
    height: 0;
    flex: 1;
    overflow: auto;

    .coupon-item-wrapper {
      padding: 20rpx 0;

      &:not(:last-child) {
        border-bottom: 2rpx solid #eee;
      }

      .coupon-item {
        display: flex;
        align-items: center;

        > .right {
          background: #e86b71;
          border-radius: 10rpx;
          padding: 20rpx 20rpx;
          margin-left: 20rpx;
          width: 0;
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;

          > .left {
            .coupon-name {
              color: #fff;
              font-size: 28rpx;
              font-weight: 500;
            }

            .expire-date {
              color: #fff;
              font-size: 24rpx;
              font-weight: 500;
              margin-top: 10rpx;
            }
          }

          > .right {
            .price {
              color: #fff;
              font-size: 32rpx;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}
</style>
